<template name="football">
	<!-- （蓝）足彩列表 -->
	<view class="" v-if="match_list">
		<view class="listBasketballBox" v-for="(item,index) in match_list" :key="index">
			<view class="top" @click="item.status = !item.status">
				<view class="time flex-bc">
					<view class="timeBox">
						<text>{{item.issue_num}}</text>
						<text>{{item.count}}场比赛</text>
					</view>
					<image src="../../static/index/top.png" :style="item.status?'transform: rotate(180deg)':''"></image>
				</view>
			</view>
			<view class="basketball" v-if="item.status">
				<view class="item flex-bc" v-for="(innerItem,innerIndex) in item.list" :key="innerIndex">
					<view class="match_type flex-c" @click="fnToLiveDetail(innerItem.match_id)">
						<text>{{innerItem.match_code}}</text>
						<text>{{innerItem.match_type}}</text>
						<text>{{innerItem.bet_end_time}}(截)</text>
						<text style="color: #5CA1FC;">分析</text>
					</view>
					<view class="macth_info">
						<view class="match_name flex-c">
							<text>{{innerItem.home_name}}</text>
							<text style="color: #666;">VS</text>
							<text>{{innerItem.away_name}}</text>
						</view>
						<view class="match_score flex-c">
							<view class="score flex-ac">
								<view class="score_num">
									0
								</view>
								<view class="score_num color" :class="innerItem.bet_data.rqspf_data.handicap>0?'red':'blue'">
									{{innerItem.bet_data.rqspf_data.handicap}}
								</view>
							</view>
							<view class="match_success flex-bc">
								<view class="match_item_box flex-c">

									<view class="match_item flex-c" v-for="(val,idx) in innerItem.bet_data.spf_data.value" :key="idx" v-if="innerItem.bet_data.spf_data.available"
									 @click="fnSelectData(1,innerItem.match_id,idx,val.status,index,innerIndex,innerItem.bet_data.spf_data.single_status)" :class="val.status?'active':''"
									 :style="{'border-color': (innerItem.bet_data.spf_data.single_status ? '#F22F29':'#E3E3E3')}">
										<text v-if="idx == 0">胜</text>
										<text v-else-if="idx == 1">平</text>
										<text v-else>负</text>
										<text>{{val.val}}</text>
										<view class="single" v-if="idx == 0 && innerItem.bet_data.spf_data.single_status">
											单
										</view>
									</view>
									<view class="match_item flex-c available" v-if="!innerItem.bet_data.spf_data.available">
										未开售
									</view>
									<view class="match_item flex-c available" v-if="!innerItem.bet_data.spf_data.available">
										未开售
									</view>
									<view class="match_item flex-c available" v-if="!innerItem.bet_data.spf_data.available">
										未开售
									</view>
									<view class="match_item flex-c" v-for="(val2,idx2) in innerItem.bet_data.rqspf_data.value" :key="'labal'+idx2"
									 v-if="innerItem.bet_data.rqspf_data.available" @click="fnSelectData(2,innerItem.match_id,idx2,val2.status,index,innerIndex,innerItem.bet_data.rqspf_data.single_status)"
									 :class="val2.status?'active':''" :style="{'border-color': (innerItem.bet_data.rqspf_data.single_status ? '#F22F29':'#E3E3E3')}">
										<text v-if="idx2 == 0">胜</text>
										<text v-else-if="idx2 == 1">平</text>
										<text v-else>负</text>
										<text>{{val2.val}}</text>
										<view class="single" v-if="idx2 == 0 && innerItem.bet_data.rqspf_data.single_status">
											单
										</view>
									</view>
									<view class="match_item flex-c available" v-if="!innerItem.bet_data.rqspf_data.available">
										未开售
									</view>
									<view class="match_item flex-c available" v-if="!innerItem.bet_data.rqspf_data.available">
										未开售
									</view>
									<view class="match_item flex-c available" v-if="!innerItem.bet_data.rqspf_data.available">
										未开售
									</view>
								</view>
								<view class="more flex-c" @click="fnSeeMore(innerItem)" :class="innerItem.status?'active2':''">
									更多选项
									<!-- <uni-icons type="arrowright" size="14" color="#ccc"></uni-icons> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'football',
		props: {
			match_list: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				match_data: [],
				showMore: true,
				match_id:'',
				is_single_arr:[]
			};
		},
		created() {
			var that = this
			console.log(this.match_list)
			// 更多选项是否选中
			uni.$on("isSelect",function(data){
				that.match_id = data.match_id
				that.match_list.forEach((item,index) =>{
					item.list.forEach((innerItem,innerIndex) =>{
						if(innerItem.match_id == that.match_id){
							console.log(innerItem);
							if(data.isSelect.length){
								innerItem.status = true
							}else{
								innerItem.status = false
							}
						}
					})
				})
			})
		},
		methods: {
			
			fnSelectData(bet_type, match_id, bet_type_id, status, index, innerIndex,is_single) {
				if (!status) {
					this.is_single_arr.push(is_single)
					var obj1 = {
						'bet_type': bet_type,
						'bet_type_id': bet_type_id
					}
					if (!this.match_data.length) {
						var obj2 = {
							'match_id': match_id,
							'bet_data': [obj1]
						}
						this.match_data.push(obj2)
					} else {
						var hasMatch = this.findElem(this.match_data, 'match_id', match_id)
						// console.log(hasMatch)
						if (hasMatch == -1) {
							// console.log('添加一个新的比赛')
							var obj2 = {
								'match_id': match_id,
								'bet_data': [obj1]
							}
							this.match_data.push(obj2)
						} else {
							this.match_data[hasMatch].bet_data.push(obj1)
						}
					}
					console.log(this.match_data)
					this.$emit("fnGetData", this.match_data)
					this.match_list.forEach((item, idx) => {
						if (index == idx) {
							// console.log(item.list)
							item.list.forEach((item2, idx2) => {
								if (innerIndex == idx2) { 
									if (bet_type == 1) {
										// console.log(item2.bet_data.spf_data.value)
										item2.bet_data.spf_data.value.forEach((item3, idx3) => {
											if (bet_type_id == idx3) {
												item3.status = true
											}
										})
									} else if (bet_type == 2) {
										// console.log(item2.bet_data.rqspf_data.value)
										item2.bet_data.rqspf_data.value.forEach((item4, idx4) => {
											if (bet_type_id == idx4) {
												item4.status = true
											}
										})
									}

								}
							})
						}
					})
				} else {
					// 再次点击删除
					this.match_data.forEach((item, index) => {
						if (item.match_id == match_id) {
							if (item.bet_data.length == 1) {
								this.match_data.splice(index, 1)
								this.is_single_arr.splice(index, 1)
							} else {
								console.log(item.bet_data)
								console.log(bet_type_id)
								item.bet_data.forEach((item1, index1) => {
									if (item1.bet_type_id == bet_type_id && item1.bet_type == bet_type) {
										console.log(index1)
										item.bet_data.splice(index1, 1)
										this.is_single_arr.splice(index, 1)
									}
								})
							}

						}
					})
					console.log(this.match_data)
					this.$emit("fnGetData", this.match_data)
					this.match_list.forEach((item, idx) => {
						if (index == idx) {
							// console.log(item.list)
							item.list.forEach((item2, idx2) => {
								if (innerIndex == idx2) {
									if (bet_type == 1) {
										// console.log(item2.bet_data.spf_data.value)
										item2.bet_data.spf_data.value.forEach((item3, idx3) => {
											if (bet_type_id == idx3) {
												item3.status = false
											}
										})
									} else if (bet_type == 2) {
										// console.log(item2.bet_data.rqspf_data.value)
										item2.bet_data.rqspf_data.value.forEach((item4, idx4) => {
											if (bet_type_id == idx4) {
												item4.status = false
											}
										})
									}

								}
							})
						}
					})
				}
				console.log(this.is_single_arr.indexOf(1))
				if(this.is_single_arr.indexOf(1) != -1){
					uni.$emit('is_single',true)
				}
			},
			fnSeeMore(innerItem) { 
				this.$emit("fnShowMore", this.showMore)
				this.$emit("getMoreData", innerItem)
			},
			fnToLiveDetail(match_id) {
				console.log(match_id)
				uni.navigateTo({
					url: `/pages/live-detail/live-detail?match_id=${match_id}`
				})
			},
			fnDeleteMatchList() {
				this.match_list.forEach((item, idx) => {
					item.list.forEach((item2, idx2) => {
						item2.bet_data.spf_data.value.forEach((item3, idx3) => {
							item3.status = false
						})
						item2.bet_data.rqspf_data.value.forEach((item4, idx4) => {
							item4.status = false
						})
					})
				})
				this.match_data = []
				this.$emit("fnGetData", this.match_data)
			},
			findElem(arrayToSearch, attr, val) {
				for (var i = 0; i < arrayToSearch.length; i++) {
					if (arrayToSearch[i][attr] == val) {
						return i;
					}
				}
				return -1;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listBasketballBox {
		border-bottom: 1rpx solid #eee;
	}

	.top {
		width: 100%;
		border-bottom: 1rpx solid #eee;

		.time {
			height: 74rpx;
			padding-left: 20rpx;
			background: #fff;
			width: 100%;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;

			.timeBox {
				font-size: 24rpx;
				color: #666;

				text {
					margin-right: 26rpx;
				}
			}

			image {
				width: 30rpx;
				height: 30rpx;
				padding: 20rpx;
				// transform: rotate(180deg);
			}
		}
	}

	.item {
		border-bottom: 1rpx solid #eee;
		background: #fff;
		padding: 24rpx 20rpx;

		.match_type {
			width: 120rpx;
			flex-direction: column;
			font-size: 24rpx;
			color: #666;
		}

		.macth_info {
			flex: 1;
			font-size: 24rpx;
			color: #333;
			// height: 100%;

			// flex-direction: column;
			.match_name {
				font-size: 28rpx;
				width: 510rpx;
				// float: right;
				// justify-content: flex-end;
				margin: 0 auto 32rpx;

				text {
					text-align: center;
				}

				text:nth-child(2) {
					flex: 1;
				}

				text:nth-child(1) {
					flex: 3;
				}

				text:nth-child(3) {
					flex: 3;
				}

			}

			.match_score {
				.score {
					flex: 1;
					flex-direction: column;
					font-size: 20rpx;
					height: 100%;

					.score_num {
						width: 36rpx;
						height: 36rpx;
						margin: 11rpx 0;
						border: 1rpx solid #999999;
						border-radius: 50%;
						color: #999;
						// background: #5CA1FC;
						text-align: center;
						line-height: 36rpx;
					}

					.color {
						border: none;
						color: #fff;
					}

					.red {
						background: #FC6655;
					}

					.blue {
						background: #5CA1FC;
					}
				}

				.match_success {
					width: 510rpx;

					.more {
						// padding: 0 20rpx;
						height: 132rpx;
						width: 66rpx;
						background: #FCFDFF;
						border: 1rpx solid #E3E3E3;
						text-align: center;
						color: #666;
					}

					.active2 {
						background: #F22F29 !important;
						// border: none;
						color: #fff !important;
					}

					.match_item_box {
						flex-wrap: wrap;
						width: 100%;

						.match_item {
							width: 146rpx;
							height: 66rpx;
							background: #FCFDFF;
							border: 1rpx solid #E3E3E3;
							box-sizing: border-box;
							// .val{
							// 	color: #666;
							// }
							position: relative;

							.single {
								position: absolute;
								top: 0;
								left: 0;
								background: #F22F29;
								color: #fff;
								font-size: 20rpx;
							}
						}

						.active {
							background: #F22F29;
							// border: none;
							color: #fff;
						}

						// .acBorder{
						// 	border-color: #F22F29;
						// }

						.available {
							background: #eee;
						}
					}
				}
			}

		}
	}
</style>
